<script setup lang="ts">
import emitter from '@/utils/mitt'
import { onMounted, onUnmounted, ref } from 'vue'
import type { WorkflowDesignRow } from '@/types/custom'

import Workflow from '@/views/system/flow/workflow/workflow.vue'

const dialogVisible = ref(false)
const wfDesign = ref<WorkflowDesignRow | null>(null)

onUnmounted(() => {
  emitter.off('onOpenWorkflow')
})

onMounted(() => {
  emitter.on('onOpenWorkflow', (design: WorkflowDesignRow) => {
    wfDesign.value = design
    // workflowId.value = id
    // console.log(id)
    dialogVisible.value = true
  })
})
</script>
<template>
  <el-dialog
    v-model="dialogVisible"
    width="80%"
    style="height: 80%"
    class="custom-dialog"
    :title="wfDesign?.name || '流程图'"
    append-to-body
    destroy-on-close
  >
    <Workflow v-if="wfDesign" hide-tool :design="wfDesign" class="h100"></Workflow>
  </el-dialog>
</template>
